import React from "react";
import {  Route, Switch, Redirect } from "react-router-dom";
import Loadable from 'react-loadable';
import  {message} from "antd"

message.config({
top:window.innerHeight/2
});

const Loading=()=>(<div>loading...</div>);

const Home = Loadable({
    loader: () => import(/* webpackChunkName: "Home" */'./Home'),
    loading: Loading,
});
const Detail = Loadable({
    loader: () => import(/* webpackChunkName: "Detail" */'./Detail'),
    loading: Loading,
});
const Cart = Loadable({
    loader: () => import(/* webpackChunkName: "Card" */'./Cart'),
    loading: Loading,
});
const Profile = Loadable({
    loader: () => import(/* webpackChunkName: "Profile" */'./Profile'),
    loading: Loading,
});
const Register = Loadable({
    loader: () => import(/* webpackChunkName: "Register" */'./Register'),
    loading: Loading,
});
const Login = Loadable({
    loader: () => import(/* webpackChunkName: "Login" */'./Login'),
    loading: Loading,
});

const Routes = () => (
    <main className="main-container" style={{width:"100%",overflow:"hidden"}}>
    <Switch>
        <Route path="/" component={Home} exact></Route>
        <Route path="/detail/:id" component={Detail}></Route>
        <Route path="/cart" component={Cart}></Route>
        <Route path="/profile" component={Profile}></Route>
        <Route path="/profile/abc" component={Profile}></Route>
        <Route path="/register" component={Register}></Route>
        <Route path="/login" component={Login}></Route>
        <Redirect to="/" />
      </Switch>
    </main>
);

export default Routes;
